<template>
	<view @click="isChangeTypeColor.open()">
		<slot></slot>
	</view>
	<myPopupVue ref="isChangeTypeColor" >
		<view class="changeTypeColor" >
			<view class="popup_title">
				设置支出/收入颜色:
			</view>
			<radio-group @change="radioChange" class="changeTheme_chooseBox">
				<label class="changeTheme_chooseBox_one" v-for="item in tagList" :key="item">
					<radio class="changeTheme_chooseBox_one_radio" :value="item" />
					<radioIconVue :isShow="item==store.state.setting.typeTag"/>
					<view class="changeTheme_chooseBox_one_text">
						<view :class="'incomeColor_'+item ">
							+收入
						</view>
						<view :class="'expensesColor_'+item">
							支出-
						</view>
					</view>
				</label>
			</radio-group>
		</view>
	</myPopupVue>
</template>

<script setup>
	import radioIconVue from '@/components/setting/radioIcon.vue';
	import myPopupVue from '@/components/base/myPopup.vue';
	import {
		ref
	} from 'vue'
	import store from "@/store/index.js"
	const isChangeTypeColor = ref()
	const tagList = ["A", "B", "C", "D"]
	const radioChange = (x) => {
		store.commit("setting/changeTypeTag", x.detail.value)
	}
</script>

<style lang="scss" scoped>
	@import "@/style/base.scss";

	.changeTypeColor {
		padding: 1em;
		padding-top: 0;
		width: $bigPopupWidth;
		.changeTheme_chooseBox {
			&_one {
				line-height: 2em;
				display: flex;
				align-items: center;
				border-bottom: $baseBorder;

				&_radio {
					display: none;
				}
				&_text {
					display: flex;
					flex: 1;
					justify-content: space-around;
					font-weight: bold;
				}
			}
		}
	}
</style>